<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="6">
            <img style="width: 200px;height: 120px" src="../images/logoico.jpg">
          </el-col>
        </el-row>
      </el-header>
      <el-container>
            <el-aside width="250px"style="margin-top: 60px">
              <el-row>
                <el-col :span="16"  :offset="4">
                  <el-menu default-active="1">
                    <span class="mytitle">全部功能</span>
                    <el-menu-item  index="1" @click="setMenu('orderTabPane')">
                      <i class="el-icon-s-order"></i>订单管理
                    </el-menu-item>
                    <el-menu-item index="2" @click="tzgwcar">
                      <i class="el-icon-shopping-cart-full"></i>我的购物车
                    </el-menu-item>
                    <el-submenu index="3">
                      <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span>账户管理</span>
                      </template>
                      <el-menu-item index="3-1" @click="setMenu('personalData')">个人资料</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="4" @click="setMenu('userCommentView')">
                      <i class="el-icon-edit-outline" ></i>评价管理
                    </el-menu-item>
                    <el-menu-item index="5" @click="setMenu('userReturnView')">
                     <i class="el-icon-sold-out" ></i> 退款管理
                    </el-menu-item>
                  </el-menu>
                </el-col>
              </el-row>
            </el-aside>
        <el-main>
          <component :is="menuName"></component>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import OrderTabPane from "../orderview/OrderTabPane";
  import UserReturnView from "../returnShop/UserReturnView";
  import personalData from "../../jiangzhipeng/useredit/personalData";
  import UserCommentView from "./UserCommentView";
  export default {
    name: "UserMainView",
    data() {
      return {
        menuName: "orderTabPane",
      }
    },
    methods: {
      setMenu(name){
        this.menuName=name;
      },
      tzgwcar(){
        this.$router.push("/gwcar");
      }
    },
    components: {
      OrderTabPane,
      UserReturnView,
      UserCommentView,
      personalData
    }
  }
</script>

<style scoped>
  .mytitle{
    color: #f40;
    font: 20px Extra large;
    line-height: 28px;
    padding-left: 20px;
  }
  .myindex{
    color: #f40;
    font: 30px Extra large;
    font-weight: bold;
    padding-left: 30px;
    line-height: 60px;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
</style>
